import React, { Component } from 'react'
import { hashHistory } from 'react-router'
import { Popup, Icon } from 'antd-mobile'
import { NavHeader } from '../common'
import { PositionDetail } from './'
import { OperatePosition } from '../trade'

const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent)
let wrapProps
if (isIPhone) {
  // Note: the popup content will not scroll.
  wrapProps = {
    // onTouchStart: e => e.preventDefault(),
  }
}

export default class PositonList extends Component {
  constructor() {
    super()
    this.opBtn = false
    this.popup = this.popup.bind(this)
    this.state = {
      detailModal: false,
      modifyModal: false,
    }
  }
  render() {
    const { detailModal, modifyModal } = this.state
    return (
      <div className={`rt-position-list-container cm-column-flex-box`}>
        <NavHeader title="持仓明细" onClick={() => hashHistory.goBack() } />

        <div className={`rt-balance-box`}>
          账户余额：3,686.90元
        </div>

        <div className={`cm-scrollable-container`}>
          <p>持仓情况</p>

          {
            Array(12).fill(1).map(v => (
              <section key={Math.random()}>
                <div className={`-above`}>
                  <div className={`-wrapper`}>
                    <time>9月19日 15:00</time>
                    <div className={`-diff-color`}>
                      <span className={`-diff-size`}>3KG工业银</span>
                      <span className={`-diff-size rt-amount`}>5手</span>
                      <span className={`rt-updown-box`}>涨</span>
                    </div>
                  </div>
                  <div className={`rt-rest-space`}>
                    <span className={`-delta-num`}>+24</span>
                  </div>
                </div>

                <div className={`-below`}>
                  <div className={`-wrapper`}>
                    <span>止盈：20%</span>
                    <span>止损：30%</span>
                    <span>开仓价格：3433</span>
                  </div>
                  <div className={`rt-rest-space`}>
                    <span className={`-btn`} onClick={this.popup}>操作</span>
                  </div>
                </div>
              </section>
            ))
          }
        </div>
        <PositionDetail
          visible={detailModal}
          opBtn={this.opBtn}
          onClose={() => {
            this.setState({
              detailModal: false,
            })
          }}
        />
        <OperatePosition
          visible={modifyModal}
          simplify
          onClose={() => {
            this.setState({
              modifyModal: false,
            })
          }}
        />
      </div>
    )
  }
  popup() {
    Popup.show(
      <div className={`rt-position-operate-box`}>
        <header>
          <div>
            <span className={`-symbol`}>当前仓位ID</span>
            <span>480</span>
          </div>
          <span>3KG 工业银</span>
        </header>
        <div
          className={`-btn-box`}
          onClick={() => {
            this.opBtn = true
            this.setState({detailModal: true}, () => Popup.hide())
          }}
        >
          平仓
        </div>
        <div
          className={`-btn-box`}
          onClick={() => this.setState({modifyModal: true}, () => Popup.hide())}
        >
          修改
        </div>
        <div
          className={`-btn-box`}
          onClick={() => {
            this.opBtn = false
            this.setState({detailModal: true}, () => Popup.hide())
          }}
        >
          详情
        </div>
        <div className={`-cancle-box`}>
          <Icon type="cross-circle" onClick={() => Popup.hide()} />
        </div>
      </div>,
      { animationType: 'slide-up', wrapProps, maskClosable: !false }
    )
  }
}